<template>
  <div class="main-item">
    <chart-topic header="规章政策"></chart-topic>
    <el-scrollbar style="height: 100%">
      <div class="policy-item">
        <div v-for="item in _ruleList" :key="item.id" class="text-item" @click="visible(item)">
          <div class="item-name">
            <img src="~@/assets/images/top-icon.png" alt="" v-if="item.isTopping" class="top">
            <span v-else>{{item.index + '、'}}</span>
           {{ item.ruleTitle }}
          </div>

          <div class="item-time">
            <span v-show="item.isNew" class="new">新</span>
            {{ item.createTime }}
          </div>
        </div>
      </div>
    </el-scrollbar>
    <appendix-dialog :visible.sync="appendixVisible" :data="appendixDetail"></appendix-dialog>

  </div>
</template>

<script>
import ChartTopic from '@/components/ChartTopic';
import FilePreview from '@/components/FilePreview';
import dayjs from 'dayjs';
import { getRuleShowDetails } from '@/api/bigScreen/rule';
import AppendixDialog from "@/components/AppendixDialog";

export default {
  name: 'index',

  components: {
    ChartTopic,
    FilePreview,
    AppendixDialog
  },
  props: {
    ruleList: {
      type: Array
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      informationId: 0,
      fpsFiles: [],
      fileType: '',
      //文档
      filesUrl: '',
      //规章制度详情id
      detailId:{
        id:null
      },
      appendixVisible: false,
      appendixDetail: {},
      index: 1
    }
  },
  computed: {
    _ruleList() {
      return this.ruleList.map(item => {
        item.createTime = item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : ''
        if(!item.isTopping) {
          item.index = this.index;
          this.index ++;
        }
        return item
      })
    }
  },
  methods: {
    visible(item) {
      this.centerDialogVisible = true
      this.informationId = item.id - 1
      this.getRuleDetails({
        id: item.id
      })
    },
    //规章制度详情
    getRuleDetails(id){
      getRuleShowDetails(id).then(res => {
        this.appendixDetail = res.data || {}
        this.appendixVisible = true
      })
    },
  }

}
</script>

<style scoped lang="scss">
::v-deep.el-scrollbar__bar.is-horizontal {
}

.main-item {
  height: 100%;
  width: 100%;

  .main-item::-webkit-scrollbar {
    width: 0;
  }
}

.policy-item::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome Safari */
}

.policy-item {
  overflow-y: auto;
  overflow-x: hidden;
  //height: calc(100% - 0.4rem);
  // margin-top: 0.4rem;

  .element::-webkit-scrollbar {
    width: 0 !important
  }

  .text-item {
    width: 100%;
    line-height: .4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    cursor: pointer;

    .item-name {
      font-size: 0.16rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 1.8rem;
      margin-left: 0.05rem;
      display: flex;

      .top {
        margin: 0.1rem .1rem 0 0;
        width: .2rem;
        height: .2rem;
      }
    }

    .item-time {
      font-size: 0.16rem;
      margin-right: .15rem;
    }
  }
}

h3 {
  text-align: center;
  font-size: 0.25rem;
  margin-top: -0.5rem;
}

.container-text {

}



.new {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  text-align: center;
  background-color: #39c2b3;
  border-radius: 2px;
  font-size: 12px;
  color: white;
  line-height: 16px;
  margin-right: 6px;
}
</style>
